<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
           {ms:include filename=headFile.htm/} 
</head>

<body>
	{ms:include filename=head.htm/} 
    <div class="pri-customer-banner" id="appCtrl">
            <div class="container">
               <div class="pri-form">
                   <div class="title">预约您的专属顾问</div>
                   <div style="margin: 0 15px">
                       <el-form :model="form">
                              <el-form-item>
                                <el-input v-model="form.userName" placeholder="您的姓名"></el-input>
                              </el-form-item>
                              
                              <el-form-item>
                                <el-input v-model="form.phone" placeholder="手机号码"></el-input>
                              </el-form-item>

                              <el-form-item label="性别">
                                <el-radio-group v-model="form.gender">
                                  <el-radio border label="男"></el-radio>
                                  <el-radio border label="女"></el-radio>
                                </el-radio-group>
                              </el-form-item>

                              <el-form-item>
                                  <el-button type="primary" style="width: 100%;" @click="submit"> 提交预约 </el-button>
                              </el-form-item>

                              <p style="font-size:12px;color:#999;text-align: center;">预约24小时，保险顾问会联系您完成方案制定</p>
                        </el-form>
                    </div>
               </div> 
            </div>
        </div>

        <div class="pri-title-bar">
            服 务 <span class="cGold">优 势</span>
        </div>

        <div class="pri-service container">
            <ul class="clearfix">
                <li>
                    <img src="{ms:globalskin.url/}/images/pri_l_1.jpg" alt="" width="242" height="180" />
                    <h3>行业领先</h3>
                    <p>深耕保险行业多年</p>
                    <p>强大品牌实力值得信赖</p>
                </li>
                <li>
                    <img src="{ms:globalskin.url/}/images/pri_l_2.jpg" alt="" width="242" height="180" />
                    <h3>专业团队</h3>
                    <p>专业经验+大数据分析</p>
                    <p>为您打造实惠全面的优质保障</p>
                </li>
                <li>
                    <img src="{ms:globalskin.url/}/images/pri_l_3.jpg" alt="" width="242" height="180" />
                    <h3>1对1持续服务</h3>
                    <p>保险顾问1对1服务定制保障方案</p>
                    <p>7x24小时为您服务</p>
                </li>
                <li>
                    <img src="{ms:globalskin.url/}/images/pri_l_4.jpg" alt="" width="242" height="180" />
                    <h3>理赔省心</h3>
                    <p>免费协助理赔</p>
                    <p>快速高效，理赔无忧</p>
                </li>
            </ul>
        </div>

        <div class="service-process">
            <div class="pri-title-bar">服 务 <span class="cGold">流 程</span></div>
            <img src="{ms:globalskin.url/}/images/service-process.png" alt="" width="1100" height="232" />
        </div>

        <div class="qa-container">
            <div class="pri-title-bar">常 见 <span class="cGold">问 题</span></div>
            <ul>
                <li>
                    <h4>Q：定制保险方案服务需要收费吗？</h4>
                    <p>A：保险方案免费定制。凡是通过中民保险网提交预约的用户（包括注册和非注册用户），都可以免费享受丰收经纪资深保险顾问提供的保险方案定制服务，没有任何附加费用。</p>
                </li>
                <li>
                    <h4>Q：定制保险方案服务需要收费吗？</h4>
                    <p>A：成功预约后，您的专属保险顾问会在24小时内与您联系，深入了解您的保障需求，为您定制最适合您的优质保障方案。</p>
                </li>
                <li>
                    <h4>Q：你们提供的保障方案为什么能比市场上的优惠？</h4>
                    <p>A：丰收经纪保险网目前已经与80多家保险公司建立了深度的合作关系。因此，在全面满足您保障需求的同时，价格也远远低于线下的保险产品。</p>
                </li>
            </ul>
        </div>

        <a href="" class="pri-order-btn">立即预约</a>

       {ms:include filename=foot.htm/}   
      
        <script>
             var vm = new Vue({
                el: '#appCtrl',
                data:function(){
                    return {
                        form:{
                            userName:'',
                            phone:'',
                            gender:'男'
                        }
                    }
                },
				methods:{
					submit: function(){
						 if(!vm.form.userName){
							 vm.$message({
								 showClose: true,
								 message: '请输入姓名',
								 type: 'error'
							 })
							 return;
						 }
						 if(!vm.form.phone){
							 vm.$message({
								 showClose: true,
								 message: '请输入手机号码',
								 type: 'error'
							 })
							 return;
						 }
						 

					 $.ajax({
							type: 'POST',
							url:'http://test.51dfs.cn/kder-api/privatecust/create.do',
							data: vm.form,
							dataType:'json',
							success:function(res){
								if(res.code==="0"){
									vm.$message({
										showClose: true,
										message: '你的信息提交成功，我们会尽快联系您',
										type: 'error'
									})
								}else{
									vm.$message({
										showClose: true,
										message: res.msg,
										type: 'error'
									})
								}
							}
						})
					  //end ajax
					}
				}
            })
        </script>
    </body>
</html>
